import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:shimmer/shimmer.dart';

import 'Pages/choose_event.dart';

void main() {
  runApp(const MaterialApp(
    home: HomePage(),
    debugShowCheckedModeBanner: false,
  ));
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //地图区域
          buildMapWidget(),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 30.0, horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //
                Shimmer.fromColors(
                  baseColor: Colors.black,
                  highlightColor: Colors.red,
                  child: const Text(
                    '制定一个日程安排?',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 32.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                const SizedBox(height: 20),
                Row(children: [
                  Expanded(
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey.shade200,
                      highlightColor: Colors.grey.shade300,
                      child: Container(
                        width: 180,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3)),
                        padding: const EdgeInsets.all(8),
                      ),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey.shade200,
                      highlightColor: Colors.grey.shade300,
                      child: Container(
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3)),
                        padding: const EdgeInsets.all(8),
                      ),
                    ),
                  )
                ]),
                const SizedBox(height: 16),
                Row(children: [
                  Expanded(
                    flex: 1,
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey.shade200,
                      highlightColor: Colors.grey.shade300,
                      child: Container(
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3)),
                        padding: const EdgeInsets.all(8),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    flex: 3,
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey.shade200,
                      highlightColor: Colors.grey.shade300,
                      child: Container(
                        width: 250,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3)),
                        padding: const EdgeInsets.all(8),
                      ),
                    ),
                  )
                ]),
                const SizedBox(height: 16),
                Row(children: [
                  Expanded(
                    flex: 1,
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey.shade200,
                      highlightColor: Colors.grey.shade300,
                      child: Container(
                        width: 40,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3)),
                        padding: const EdgeInsets.all(8),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    flex: 2,
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey.shade200,
                      highlightColor: Colors.grey.shade300,
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3)),
                        padding: const EdgeInsets.all(8),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    flex: 1,
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey.shade200,
                      highlightColor: Colors.grey.shade300,
                      child: Container(
                        width: 120,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3)),
                        padding: const EdgeInsets.all(8),
                      ),
                    ),
                  )
                ]),

                const SizedBox(height: 30),
                Column(
                  children: [
                    MaterialButton(
                      onPressed: () async {
                        dynamic result = await Navigator.of(context).push(
                            MaterialPageRoute(
                                builder: (context) => const ChooseEventPage()));
                        debugPrint("选择好了 $result");
                      },
                      height: 50,
                      elevation: 0,
                      highlightElevation: 0,
                      minWidth: double.infinity,
                      color: Colors.grey.shade200,
                      shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.grey.shade300),
                          borderRadius: BorderRadius.circular(8)),
                      child: const Text(
                        "今日",
                        style: TextStyle(
                            color: Colors.red,
                            fontSize: 18,
                            fontWeight: FontWeight.w600),
                      ),
                    ),
                    const SizedBox(height: 12),
                    MaterialButton(
                      onPressed: () => {},
                      height: 50,
                      elevation: 0,
                      highlightElevation: 0,
                      minWidth: double.infinity,
                      color: Colors.grey.shade200,
                      shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.grey.shade300),
                          borderRadius: BorderRadius.circular(8)),
                      child: const Text(
                        "明日",
                        style: TextStyle(
                            color: Colors.red,
                            fontSize: 18,
                            fontWeight: FontWeight.w600),
                      ),
                    ),
                    const SizedBox(
                      height: 12,
                    ),
                    MaterialButton(
                      onPressed: () => {},
                      height: 50,
                      elevation: 0,
                      highlightElevation: 0,
                      minWidth: double.infinity,
                      color: Colors.grey.shade200,
                      shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.grey.shade300),
                          borderRadius: BorderRadius.circular(8)),
                      child: const Text(
                        "下周",
                        style: TextStyle(
                            color: Colors.red,
                            fontSize: 18,
                            fontWeight: FontWeight.w600),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    ));
  }

  Container buildMapWidget() {
    return Container(
      height: 360,
      padding: const EdgeInsets.only(top: 100, right: 40, left: 40, bottom: 50),
      decoration: BoxDecoration(color: Colors.red.shade100),
      width: double.infinity,
      child: Lottie.asset("assets/88146-event-venue.json"),
    );
  }
}
